<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="weex-viewport" content="750">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-touch-fullscreen" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no, email=no">
  <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.common.js"></script>
</head>
<style>
body{
    width: 100%;
    height:300px;
    padding: 0;
    margin: 0;
    background-color: #f5f5f5;
}
.main{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
<body>
    <div class="main">
        <div id="chart" style="width: 100%;height:100%;"></div>
    </div>
</body>

<script>
    window.onload = function(){
        var myChart = echarts.init(document.getElementById('chart')); 
        var option = {
            graphic: [{ 
                type: 'text',
                left: 'center',
                top: '44%',
                style:{
                text:'税费合计',
                textAlign: 'center',
                fill: '#8a8a8a',
                fontSize: 12
                },
            },
            { 
                type: 'text',
                left: 'center',
                top: '52%',
                style: {
                text: '330,000.00',
                textAlign: 'center',
                fontSize: 16
                }
            }],
            series: [{
                type: 'pie',
                radius: ['45%', '70%'],
                data: [
                    { value: 33, name: '收入：1.32%' },
                    { value: 156, name: '增值税：32.26%' },
                    { value: 234, name: '消费税.26%' },
                    { value: 135, name: '印花税：15.48%' },
                    { value: 85, name: '城建税：10.2%' },
                    { value: 120, name: '教育费附加：1.32%' },
                    { value: 134, name: '地方教育费附加：32.26%' },
                    { value: 34, name: '个人所得税：32.26%' },
                    { value: 135, name: '文化建设费：15.48%' },
                    { value: 131, name: '所得税：10.2%' }
                ],
                itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            labelLine:{
                length: 10,
                length2: 10
            },
            color: ['#3d731b', '#3283bb', '#529fd3', '#7addfa', '#89ce33', '#fea000', '#ff9f7f', '#fb7293', '#e062ae','#e690d1']
            }]
        };
        myChart.setOption(option);
    }
</script>
</html>